import { useEffect, useState } from 'react';
import axios from '../../axios';
import { Input, DatePicker, Space, Table, Button, Modal, Row, Col } from 'antd';
const { Search } = Input;
const { RangePicker } = DatePicker;

function GoodsSpecs() {
    const [keywords, setkeywords] = useState("")
    const onSearch = (value, _e, info) => {
        setkeywords(value)//先执行

    };
    const [dataSource, setdataSource] = useState([])
    const getList = async () => {
        let { list } = await axios.get("/store/product/rule/list", {
            params: {
                page: 1,
                limit: 20,
                keywords,
                temp: new Date().getTime(),
            }
        })
        setdataSource(list)
    }

    const columns = [
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '规格名称',
            dataIndex: 'ruleName',
            key: 'ruleName',
        },
        {
            title: '商品规格',
            dataIndex: 'ruleValue',
            key: 'ruleValue',
            render: (_, record) => {

                return (
                    <>
                        {JSON.parse(record.ruleValue).map(item => item.value)}
                    </>
                )
            }
        },
        {
            title: '商品属性',
            dataIndex: 'ruleValue',
            key: 'ruleValue',
            render: (_, record) => {

                return (
                    <>
                        {JSON.parse(record.ruleValue).map(item => {
                            return item.detail.join(",")
                        })}
                    </>
                )
            }
        },
        {
            title: '操作',
            dataIndex: 'x',
            key: 'x',
            render: (_, record) => {

                return (
                    <>
                        <Button onClick={()=>editor(record)}>编辑</Button>
                    </>
                )
            }
        },
    ];
    useEffect(() => {
        getList()
    }, [keywords])
    const [ruleName, setruleName] = useState("")
    const [isModalOpen, setIsModalOpen] = useState(true);//显示弹框
    const [showInput, setShowinput] = useState(false)//添加规格

    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleOk = () => {
        console.log(ruleValue);

        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };


    const [ruleValue, setruleValue] = useState([])

    const [value, setValue] = useState("")
    const [detail, setDetail] = useState("")

    const yesAdd = () => {
        setShowinput(!showInput)
        setValue("")
        setDetail("")

        setruleValue(pre => {
            pre.push({
                value,
                detail: [detail],
                inputVisible: false
            })
            console.log(pre);

            return [...pre]
        })
    }
    const tabAdd = (index) => {
        setruleValue(pre => {
            pre[index].inputVisible = !pre[index].inputVisible
            return [...pre]
        })
    }
    const yesbtn = (index) => {
        let inputDom = document.querySelector(`#ok${index}`).value;
        console.log(inputDom);

        setruleValue(pre => {
            pre[index].detail.push(inputDom)
            pre[index].inputVisible = !pre[index].inputVisible
            return [...pre]
        })
    }

    const editor = () => {
        setIsModalOpen(true);
        setruleValue([{
            value: "可欣",
            detail: ['100', '200'],

            inputVisible: false
        }])
    }
    return (

        <div className='whitebg'>
            <Search
                width={200}
                placeholder="输入商品的规格"
                allowClear
                enterButton="搜索"
                size="large"
                onSearch={onSearch}
            />
            <Button type='primary' onClick={showModal}>添加规格</Button>
            <Table rowKey="id" dataSource={dataSource} columns={columns} />;

            <Modal title="添加规格" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>

                <Input value={ruleName} onChange={(e) => setruleName(e.target.value)} placeholder='输入规格名称' ></Input>
                {!showInput ? <Row>
                    <Col span={8}><Input value={value} onChange={(e) => setValue(e.target.value)} addonBefore="规格" placeholder='输入规格' ></Input></Col>
                    <Col span={8}><Input value={detail} onChange={(e) => setDetail(e.target.value)} addonBefore="规格值" placeholder='输入规格值' ></Input></Col>
                    <Col span={8}><Button type='primary' size='small' onClick={yesAdd}>确定</Button><Button size='small' onClick={() => setShowinput(!showInput)}>取消</Button></Col>
                </Row> : ""}

                {/* 下面是循环渲染 */}
                {
                    ruleValue.map((item, index) => {

                        return (
                            <div key={item.value}>
                                <p>
                                    {item.value}
                                </p>
                                {item.detail.map((son, i) => {
                                    return <b key={i}>{son}</b>
                                })}
                                {item.inputVisible ? <><Input id={'ok' + index} style={{ width: "80px" }}></Input><button onClick={() => yesbtn(index)}>确定</button></> : <Button onClick={() => tabAdd(index)} size='small'>+</Button>}
                            </div>
                        )
                    })
                }


                <div>
                    {showInput ? <Button onClick={() => setShowinput(!showInput)} type='primary'>添加新规格</Button> : ""}

                </div>
            </Modal>
        </div>
    );
}

export default GoodsSpecs;